<template>
  <div class="container greenTop1">
    <select-role2 @familychang="familychangHandle" :needCard="1" ref="role2"></select-role2>
    <div class="infinite-container visual-content" style="padding-bottom:50px;">
    <confirm-id :familyPerson="familyPerson" :person="person"  :show.sync="showConfirm"></confirm-id>
    <div v-show="!handlerDisable">
      <!-- <div class="bgwhite">
        <mu-flat-button label="查看缴费记录" primary to="/inpatient-care/prePayRecord"/>
      </div> -->
      <div class="bgwhite">
        <mu-list>
          <mu-list-item >
            <div slot="title">账户余额
              <small class="accout-history" @click="$router.push('/setting/query-account')">查看账单></small>
            </div>
            <span slot="right" class="feeText">{{account.accountBalance | fixedMoney}}</span>
          </mu-list-item>
          <mu-divider />
          <mu-list-item title="未缴费金额">
            <span slot="right" class="feeText">{{account.unpaidAmount | fixedMoney}}</span>
          </mu-list-item>
          <mu-divider />
          <mu-list-item title="需补缴金额">
            <span slot="right" class="feeText">{{account.paymentAmount | fixedMoney}}</span>
          </mu-list-item>
        </mu-list>
      </div>
      <div class="bgwhite mt10" style="padding:10px 20px 20px 20px">
        <mu-text-field hintText="￥请输入预缴金额" v-model="selAmount" type="number" :disabled="handlerDisable"/>
        <mu-divider />
        <p class="grayText">常用充值金额</p>
        <ul class="flex flex_between amountList">
          <li v-for="item in amount" :key="item" :class="{selLi: selAmount === item}" @click="selAmount = item">￥{{item}}</li>
        </ul>
      </div>
      <div class="mt10"></div>
      <pay-method v-show="this.$APP_PLATFORM===1"></pay-method>
      <p class="bottomTip">提示：该功能仅限有卡患者使用</p>
      
      </div>
    </div>

    <div class="fixed-bottom">
      <div class="flex flex_between bottomH flex_vcenter">
        <div>
          <span>需支付：</span>
          <span class="feeTextBig">{{selAmount | fixedMoney}}</span>
        </div>
        <mu-raised-button label="充值" primary @click="pay()" :disabled="handlerDisable"/>
      </div>
    </div>

    <mu-dialog :open="dialogOpen" >
      您当前没有住院，暂时无法预缴金。
      <mu-flat-button slot="actions" @click="goBack" primary label="确定"/>
    </mu-dialog>
  </div>
</template>

<script>
  import SelectRole2 from '../../components/SelectRole2'
  import payMethod from '../../components/payMethod.vue'
  import confirmId from '../../components/confirmId'
  import {commonAjax, RESTFUL_API} from '@/api/api'
  import {wxPay, aliPay} from '../../api/wxPay.js'
  export default {
    data () {
      return {
        amount: ['1000', '2000', '3000', '5000'],
        selAmount: '',
        familys: [],
        familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
        person: JSON.parse(sessionStorage.person),
        showConfirm: false,
        dialogOpen: false,
        account: {
          accountBalance: 0,
          paymentAmount: 0,
          unpaidAmount: 0
        },
        handlerDisable: false,
        selectedPerson: '请选择就诊人',
        outTradeNo: ''
      }
    },
    components: {
      payMethod, confirmId, SelectRole2
    },
    mounted () {
      if (this.$route.query.selectperson === '1') {
        this.$refs.role2.show()
      }
    },
    methods: {
      familychangHandle (f) {
        this.familyPerson = f
        this.queryAccount()
      },
      goBack () {
        this.dialogOpen = false
        this.handlerDisable = true
      },
      checkOk (val) {
        if (val.data.id && val.data.code === 1) { // 已经通过就诊卡认证
          this.familyPerson.outpatientCardNo = val.data.id
          sessionStorage.familyPerson = JSON.stringify(this.familyPerson)
        }
        this.showConfirm = false
      },
      queryAccount () {
        let params = {
          patientCode: this.familyPerson.patientcode || ''
        }
        this.$store.commit('UPDATE_LOADING')
        commonAjax(`${RESTFUL_API.unpaidAmount}`, params, true).then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 1) {
            this.account = res.data.data
          }
        })
      },
      pay () {
        if (parseFloat(this.selAmount) === 0 || this.selAmount.length === 0) {
          this.$store.commit('UPDATE_TOAST', {message: '请输入支付金额'})
          return
        }
        this.$store.commit('UPDATE_LOADING')
        let param = {
          total_amt: this.selAmount,
          order_subject: '门诊账户充值',
          order_detail: '门诊账户充值',
          username: this.familyPerson.realname,
          url_success: '/success',
          url_fail: '/fail',
          body: JSON.stringify({busType: 3, patientCode: this.familyPerson.patientcode})
        }
        if (this.$APP_PLATFORM === 1) {
          param.openid = sessionStorage[this.$APP_PLATFORM_NAME]
        } else {
          param[this.$APP_PLATFORM_NAME] = sessionStorage[this.$APP_PLATFORM_NAME]
        }
        const payurl = this.$APP_PLATFORM === 1 ? RESTFUL_API.getPayInfo : RESTFUL_API.getPayInfoAlipay
        commonAjax(payurl, param, true).then(res => {
          this.$store.commit('UPDATE_LOADING')
          // alert(JSON.stringify(res.data))
          if (res.data.code === 1) {
            this.outTradeNo = res.data.data.bodyModel.outTradeNo
            if (this.$APP_PLATFORM === 1) {
              wxPay(res.data.data.bodyModel, this.payOk, this.payFail)
            } else {
              aliPay(res.data.data.bodyModel, this.payOk, this.payFail)
            }
          } else {
            this.$store.commit('UPDATE_TOAST', {message: res.data.message || '服务错误', timeout: 2500})
          }
        })
      },
      payProcessTrade () {
        let params = {outTradeNo: this.outTradeNo}
        const payprourl = this.$APP_PLATFORM === 1 ? RESTFUL_API.payProcessTrade : RESTFUL_API.payProcessTradeAlipay
        return commonAjax(payprourl, params, true)
      },
      payOk () {
        this.payProcessTrade().then(res => {
          if (res.data.code === 1) {
            this.$router.push({
              path: '/payResult',
              query: {
                result: 'ok',
                backPath: '/',
                backName: '回到首页'
              }
            })
          }
        })
      },
      payFail () {
        this.$router.push({
          path: '/payResult',
          query: {
            result: 'fail',
            backPath: '/inpatient-care/prePayHand',
            backName: '重新支付'
          }
        })
      }
    },
    beforeDestroy () {
    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/flex.css";
  @import "../../common/css/vars";
  @color-feeText:@color-price;
  .amountList{
    padding-top:10px;
    li{
      border: 1px solid @color-border;
      height:34px;
      line-height:34px;
      border-radius: 34px;
      padding:0 10px;
      color:@color-gray;
    }
    .selLi{
      border: 1px solid transparent;
      background-color: @color-primary;
      color:white;
    }
  }
  .grayText{
    padding-top:10px;
    color:@color-gray
  }
  .feeText{
    color:@color-feeText
  }
  .accout-history{
    color: @color-price;
    // border: 1px solid @color-price;
    padding-left:20px;
  }
  .feeTextBig{
    color:@color-feeText;
    font-size:20px;
  }
  .select-role {
    .accoutlist {
      color: #fbc887;
      border: 1px solid #fbc887;
      padding: 1px 4px;
      border-radius: 4px;
      display: inline-block;
      margin-left: 10px;
      font-size: 12px;
    }
    padding:10px 10px;
    span {
      color:white;
      font-size:16px;
    }
    .roleRight{
      img{
        margin-left:10px;
        height:16px;
      }
    }
  }
</style>
